<template>
  <el-dialog :title="title" :visible.sync="visible" width="600" center>
    <div class="store-tree">
      <el-scrollbar style="height:100%">
        <el-tree
          v-if="treeData.length"
          show-checkbox
          :data="treeData"
          default-expand-all
          :props="replaceFields"
          check-strictly
          highlight-current
          node-key="id"
          check-on-click-node
          :expand-on-click-node="false"
          ref="tree"
          @check-change="handleCheckChange"
        >
        </el-tree>
        <div class="no-have" v-else>暂无数据</div>
      </el-scrollbar>
    </div>
    <div slot="footer" style="text-align: right">
      <el-button @click="handleCancel" size="small">取 消</el-button>
      <el-button type="primary" @click="handleOk('editFormRef')" size="small">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getJurisdictionTreeList } from '../js/auth'

export default {
  name: 'UpermissionTreeModal',
  data () {
    return {
      title: '上级权限编辑',
      visible: false,
      treeData: [],
      replaceFields: {
        children: 'children',
        label: 'label'
      }
    }
  },
  props: {
    checkUpermissionInfo: {
      type: Object,
      required: false,
      default: () => {}
    },
    isOnlyShowParent: {
      type: Boolean,
      required: false,
      default: false
    },
    deptLevel: {
      type: Number,
      required: false,
      default: 0
    }
  },
  mounted () {
    // this.getUpermissionTreeTree()
  },
  methods: {
    // 新增
    add () {
      this.visible = true
      this.getUpermissionTreeTree()
    },
    // 查询tree
    async getUpermissionTreeTree () {
      let params = {}
      let res = await getJurisdictionTreeList(params)
      if (res.code === 0 && res.data) {
        this.options = []
        const result = res.data
        this.treeData = this.generateChildData(result)
        this.setDeptInfo(this.checkUpermissionInfo)
      } else {
        this.$message.warning(res.msg)
      }
    },
    generateChildData (data) {
      const routers = []
      for (var item of data) {
        let menu = {
          label: item.name,
          id: item.pkId,
          parentId: item.parentId
        }
        if (item.children && item.children.length > 0) {
          menu.children = [...this.generateChildData(item.children)]
        }
        routers.push(menu)
      }
      return routers
    },

    // 提交表单
    handleOk () {
      const { label, id } = this.$refs.tree.getCheckedNodes()[0]
      this.$emit('deptModalOk', { label, id })
      this.handleCancel()
    },

    // 单选设置
    handleCheckChange (data, checked) {
      if (checked) {
        this.$refs.tree.setCheckedKeys([data.id])
      }
    },

    // 设置选中项
    setDeptInfo (val) {
      if (Object.keys(val).length) {
        this.$nextTick(() => {
          this.$refs.tree.setCheckedKeys([val.id])
        })
      }
    },

    // 关闭
    handleCancel () {
      this.visible = false
      this.$refs.tree.setCheckedKeys([])
    }
  }
}
</script>
<style lang="scss" scoped>
.store-tree {
  box-sizing: border-box;
  border: 1px solid #e8ebee;
  padding: 20px;
  height: 500px;
  /deep/ .el-scrollbar__wrap {
    overflow-x: hidden;
  }
  .no-have {
    width: 100%;
    text-align: center;
    padding-top: 130px;
  }
}
</style>
